<template>
  <div>
    <el-row>
      <el-col :span="4" style="overflow: auto;height: 800px">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
        <el-tree
          ref="tree"
          :data="deptTreeList"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :highlight-current="true"
          :props="defaultProps"
          class="filter-tree"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-col>
      <el-col :span="20">
        <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100% ;overflow: auto;height: 800px"
        >
          <el-table-column label="日期" prop="date"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" placeholder="输入关键字搜索" size="mini"/>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="block" style="position: relative;margin-left: 32%;margin-top: 2%">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDeptTreeList } from '@/api/dangjian/partyBuilding'

export default {
  name: 'organizationList',
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getDeptTreeLists()
  },
  data() {
    return {
      //党组织搜索框value
      filterText: '',
      //党员搜索框value
      search: '',
      //党组织列表
      deptTreeList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //党组织table表格
      tableData: [
        { date: '2016-05-03', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '李四', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王五', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '赵六', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
      ],
      pageSize: 10,
      total: 20,
      currentPage: 1
    }
  },
  methods: {
    /*党组织关系列表*/
    getDeptTreeLists() {
      getDeptTreeList().then(res => {
        this.deptTreeList = res.data
      })
    },
    /*部门搜索*/
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    /*部门点击事件*/
    handleNodeClick(data) {
      console.log(data.id)
    },
    /*党员查看事件*/
    handleEdit(index, row) {
      console.log(index, row)
    },
    /*党员删除事件*/
    handleDelete(index, row) {
      console.log(index, row)
    },
    /*分页*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped>

</style>
